<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Submit.aspx.cs" Inherits="ImageReview.Submit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Turners Photo Decoding Service - Image Submission</title>
    <link type="text/css" rel="Stylesheet" href="Master.css" />
    <link type="text/css" rel="Stylesheet" href="PreviewStyles.css" />
    <link type="text/css" rel="Stylesheet" href="Styles/uploadify.css" />
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.uploadify.min.js" type="text/javascript"></script>
    <style type="text/css">
        .prcess-button {
            line-height: 25px;
            height: 35px;
            width: 300px;
            background-color: #555555;
            color: #FFFFFF;
            font-size: 14px;
            font-weight: bold;
            font-family:'Helvetica Neue',sans-serif;
            border: 1px solid #555555;
        }
        #upload-errors {
            margin: 10px 40px 10px 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table width="100%" class="headingTable" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width: 50%; height: 58px; text-align: left; vertical-align: top; background-image: url('logo.gif');
                                          background-repeat: no-repeat; background-position: left bottom;">
                    &nbsp;</td>
                <td style="width: 50%; text-align: right; vertical-align: middle;" class="pageheading">
                    Select Images for Processing</td>
            </tr>
            <tr>
                <td colspan="2" style="width: 100%; height: 20px" class="separator" align="right">
        <a href="Search.aspx" class="customLink1">Search</a> | <span class="linklabel">Select & Process</span> | <a href="Default.aspx" class="customLink1">Match Good ID </a>| <a href="Process.aspx" class="customLink1">Review Images</a>| <a href="Accept.aspx" class="customLink1">Waiting</a> | <a href="BatchProcess.aspx" class="customLink1">Batch Process</a>  &nbsp;
                </td>
            </tr>
        </table>
        <br />
        <div class="leftspacing">
            <asp:Label ID="lblUsername" runat="server" Text="Could not find current user." CssClass="desclabel"></asp:Label>
            <asp:Label ID="lblUsername2" runat="server" Text=""></asp:Label>
            <!--<asp:Label ID="Label1" runat="server" Text="Image Folder: " CssClass="desclabel"></asp:Label>-->
            <asp:Label ID="FolderName" runat="server" Text=" " Visible="False" CssClass=""></asp:Label>
            <br />
            <br />
            <div class="section-title">Step 1: Select images for upload
                <div style="font-weight: normal; padding-left:50px;">You can use this more than once before processing your images</div>
            </div>
            <div id="upload-errors"></div>
            <div class="upload-images">
 		        <div id="queue"></div>
		        <input id="file_upload" name="file_upload" type="file" />
                <!--<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>-->
            </div>
            <div class="section-title">Step 2: Submit images for processing</div>
            <asp:Panel ID="submitPanel" runat="server">
                <div class="submit-images" runat="server">
                    <asp:Button ID="btnSubmit" runat="server" Text="SUBMIT IMAGES FOR PROCESSING" CssClass="prcess-button" OnClick="btnSubmit_Click" />
                    <br />
                    <br />
                    <asp:PlaceHolder ID="phImages" runat="server"></asp:PlaceHolder>
                </div>
            </asp:Panel>
            
            <div  class="section-title">
                <asp:Panel ID="nextPanel" runat="server" Visible="false">Step 3: 
                <asp:LinkButton ID="btnNext" Text="Click here to proceed and match Good IDs" runat="server"
                    onclick="btnNext_Click" />
            </asp:Panel>
            </div>
            
        </div>
        <div>
        </div>
    </form>
	<script type="text/javascript">
	    $(document).ready(function () {
	        $('#file_upload').uploadify({
	            'auto': true,
	            'fileTypeDesc': 'Image Files',
	            'fileTypeExts': '*.jpg',
	            'fileSizeLimit': '3MB',
	            'swf': 'Scripts/uploadify.swf',
	            'uploader': 'Submit.aspx',
	            'onFallback': function () {
	                alert("Flash Player Plugin was not detected.");
	            },
	            'onQueueComplete': function (queueData) {
	                var displayMessage = '<span style="float:left; width:100%; line-height:24px; color: Green; padding-left: 10px; "><b>-</b> ' + queueData.uploadsSuccessful + ' files was successfully uploaded.</span>';
	                if (queueData.uploadsErrored > 0) {
	                    displayMessage += '<span style="float:left; width:100%; line-height:24px; color: Red; padding-left: 10px; "><b>-</b> ' + queueData.uploadsErrored + ' files failed to uploaded.</span>';
	                }
	                $('#upload-errors').append(displayMessage);
	                queueData.uploadsSuccessful = 0;
	                queueData.uploadsErrored = 0;
	                alert("Click OK to see the list of files that have been uploaded successfully.                                                                                                                                                                                                                                                                                                               If any files have failed to upload, note them down before clicking OK. Please try uploading these again before selecting Submit.");
	                location.reload();
	            },
	            'onUploadError': function (file, errorCode, errorMessage, errorString) {
	                $('#upload-errors').append('<span style="float:left;width:100%; line-height:24px; color: Red; padding-left: 10px;"><b>-</b>The file ' + file.name + ' upload failed: ' + errorString + '</span>');
	            },
	            'onDialogOpen': function () {
	                $('#upload-errors').html('');
	            }
	        });
	    });
	</script>
</body>
</html>
